// 获取canvas元素并添加类型注解
const canvas = document.getElementById('canvas') as HTMLCanvasElement | null;
function draw1(canvas: HTMLCanvasElement) {
    // 检查canvas是否存在
    if (canvas) {
        // 获取2D绘图上下文并检查
        const ctx = canvas.getContext('2d');

        if (ctx) {
            ctx.fillStyle = 'green';
            ctx.fillRect(10, 10, 100, 100);
            ctx.fillStyle = 'red';
            ctx.fillRect(30, 30, 50, 50);
        } else {
            console.error('无法获取Canvas 2D上下文');
        }
    } else {
        console.error('未找到ID为"canvas"的元素');
    }
}


function draw2(canvas: HTMLCanvasElement) {
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)
        ctx.moveTo(65, 65);
        ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
        ctx.stroke();
    }
}
function draw3(canvas: HTMLCanvasElement) {
//   var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    // 填充三角形
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(105, 25);
    ctx.lineTo(25, 105);
    ctx.fill();

    // 描边三角形
    ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    ctx.closePath();
    ctx.stroke();
  }
}

// draw1(canvas);
// draw2(canvas);
draw3(canvas);
